<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--<h1>Guacamole Remote Desktop</h1>-->
<!-- Guacamole -->
{% load staticfiles %}
<script type="text/javascript" src="{% static 'plugins/guacamole/all.min.js' %}"></script>

<!-- Display -->
<div id="display"></div>

<!-- Init -->
<script type="text/javascript"> /* <![CDATA[ */

    // Get display div from document
    var display = document.getElementById("display");

    // Instantiate client, using an HTTP tunnel for communications.
    //http://guacamole.apache.org/doc/guacamole-common-js/Guacamole.WebSocketTunnel.html
    var ws_scheme = window.location.protocol == "https:" ? "wss" : "ws";
    var ws_path = ws_scheme + '://' + window.location.host + '/guacamole/{{id}}/';
    var guac = new Guacamole.Client(
       // new Guacamole.HTTPTunnel("tunnel")
        new Guacamole.WebSocketTunnel(ws_path)
    );

    // Add client to display div
    display.appendChild(guac.getDisplay().getElement());

    // Error handler
    guac.onerror = function(error) {
        <!--alert(error);-->
        console.log(error);
    };

    // Connect
    guac.connect();

    // Disconnect on close
    window.onunload = function() {
        guac.disconnect();
    }

    // Mouse
    var mouse = new Guacamole.Mouse(guac.getDisplay().getElement());

    mouse.onmousedown =
    mouse.onmouseup   =
    mouse.onmousemove = function(mouseState) {
        guac.sendMouseState(mouseState);
    };

    // Keyboard
    var keyboard = new Guacamole.Keyboard(document);

    keyboard.onkeydown = function (keysym) {
        guac.sendKeyEvent(1, keysym);
    };

    keyboard.onkeyup = function (keysym) {
        guac.sendKeyEvent(0, keysym);
    };

/* ]]> */ </script>
</body>
</html>